<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
    <link rel="stylesheet" href="__ROOT__/Static/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/hdjs/hdjs.css"/>
    <!--声明百度编辑器-->
    <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor1_4_3/ueditor.config.js"></script>
     <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor1_4_3/ueditor.all.min.js"> </script>
     <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>
	<!--载入uploadify相关文件-->
	<script type="text/javascript" src="__STATIC__/uploadify/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
	<link href="__STATIC__/uploadify/uploadify.css" type="text/css" rel="stylesheet"></link>
    <!--异步调取规格和属性-->
	<script type="text/javascript">
	   $(function(){
	   	    
			$('select[name=cid]').change(function(){
				//获得选中的option的类型tid
				var tid = $(':selected').attr('tid');
				
				$.ajax({
					type:"post",
					url:"{|U:'Admin/Goods/getAttrSpec'}",
					data:{tid : tid},
					dataType:'json',
					success:function(phpData){
						//属性
						var attr = '';
						//规格
						var spec = '';
						$.each(phpData, function(k,v) {    
							//如果是属性(不可选)	
							if(v.class == 0){
							  	attr += '<tr style="background: #D9EDF7;"><td>'+v.taname+'</td><td><select name="attr['+v.taid+']"><option value="0">请选择</option>';
							  	$.each(v.tavalue, function(kk,vv) {    
							  		attr += '<option value="'+vv+'">' + vv + '</option>';                                                          
							  	});
							  	attr += '</select></td></tr>';
							}else{
								spec += '<tr <tr style="background: #D9EDF7;"><td>'+v.taname+'</td><td><select name="spec['+v.taid+'][sp][]"><option>请选择</option>';
							  	$.each(v.tavalue, function(kk,vv) {    
							  		spec += '<option>' + vv + '</option>';                                                          
							  	});
							  	spec += '</select></td><td>附加价格 <input type="" name="spec['+v.taid+'][added][]" id="" value="0" /></td><td><a href="javascript:void(0);" class="btn btn-primary add-spec">增加一项</a></td></tr>';
							}
						});
						
						$('#attr').html(attr);
						$('#spec').html(spec);
						
					}
				});
			})
			
			//添加一个规格
			$('.add-spec').live('click', function () {
				var tr = $(this).parents('tr');
				var obj = tr.clone();
				var del = '<span class="del-spec btn btn-info"><i class="icon-white icon-minus"></i>删除规格</span>';
				obj.find('td').eq(3).find('.add-spec').remove();
				obj.find('td').eq(3).append(del);
				tr.after(obj);
			});
		
			//删除一个规格
			$('.del-spec').live('click', function() {
				$(this).parents('tr').remove();
			});
			
			
		})
	</script>
	
	<style type="text/css">
		/*去掉uploadify上传按钮的边框*/
	    .uploadify-button {
	        background-color: transparent;
	        border: none;
	        padding: 0;
	    }
	    .uploadify:hover .uploadify-button {
	        background-color: transparent;
    	}
    	.hide{
    		display: none;
    	}
    	body{
    		margin-bottom: 100px;
    	}
    	li{
    		list-style: none;
    	}
	</style> 
	
</head>
<body>
	<div class="container-fluid">
	<div class="row-fluid">
	<div class="span12">

	<form action="" method='post'>
		<fieldset>
			<legend>添加商品</legend>
			<table class='table table-bordered table-hover'>
				<thead>
					<tr>
						<th colspan="2" class="btn btn-primary">基本信息</th>
					</tr>
				</thead>
				<tbody>
					<tr class="info">
						<td>所属分类</td>
						<td>
							<select name="cid">
								<option value="0">-请选择-</option>
							<foreach from="$cateData" key="$k" value="$v">
								<option value="{$v.cid}" tid="{$v.tid}">{$v._name}</option>
								
							</foreach>		
							</select>
						</td>
					</tr>
					<tr class="info">
						<td>所属品牌</td>
						<td>
							<select name="bid">
								<option value="0">-请选择-</option>
							<foreach from="$brandData" key="$k" value="$v">
								<option value="{$v.bid}">{$v.bname}</option>
							</foreach>	
							</select>
						</td>
					</tr>
					<tr class="info">
						<td>商品名称</td>
						<td>
							<input type="text" name='gname'/>
						</td>
					</tr>
					<tr class="info">
						<td>单位</td>
						<td>
							<input type="text" name='unit' value='件'/>
						</td>
					</tr>
					<tr class="info">
						<td>市价场</td>
						<td>
							<input type="text" name='marketprice'/>
						</td>
					</tr>
					<tr class="info">
						<td>商城价</td>
						<td>
							<input type="text" name='shopprice'/>
						</td>
					</tr>
					<tr class="info">
						<td>点击次数</td>
						<td>
							<input type="text" name='click'/>
						</td>
					</tr>
				</tbody>
			</table>

			<p class="btn btn-primary">商品属性</p>
			<table class="table table-bordered table-hover" id='attr' class="info">
				
			</table>
			<p class="btn btn-primary">商品规格</p>
			<table class="table table-bordered table-hover" id='spec'>
				
			</table>

			<table class='table table-bordered'>
				<tr>
					<th colspan="3" class="btn btn-primary">列表图</th>
				</tr>
				<tr class="info">
					<td>上传图片</td>
					<td>
						<input type="file" name='pic' id='pic'/>
				<span>类型: *.jpg,*.png 大小: 2000KB 数量: 10</span>
	            <script type="text/javascript">
	                $(function() {
	                    $('#pic').uploadify({
	                        'formData'     : {//POST数据
	                            '<?php echo session_name();?>' : '<?php echo session_id();?>',
	                        },
	                        'fileTypeDesc' : '上传文件',//上传描述
	                        'fileTypeExts' : '*.jpg;*.png',
	                        'swf'      : '__STATIC__/uploadify/uploadify.swf',
	                        'uploader' : '{|U:"upload"}',
	                        'buttonText':'选择文件',
	                        'fileSizeLimit' : '2000KB',
	                        'uploadLimit' : 1000,//上传文件数
	                        'width':65,
	                        'height':25,
	                        'successTimeout':10,//等待服务器响应时间
	                        'removeTimeout' : 0.2,//成功显示时间
	                        'onUploadSuccess' : function(file, data, response) {
	                            data=$.parseJSON(data);
	                            var imageUrl = data.image?data.url:'__STATIC__/image/default.png';
	                            var li="<li path='"+data.path+"' url='"+data.url+"'><img src='"+imageUrl+"' class='hd-w80 hd-h70'/><a href='javascript:;' class='del-img'>X</a><>";
	                            li += '<input type="hidden" name="thumb_list" value="'+data.path+'"/>';
	                           
	                            $("#pic-list").prepend(li);
	                        }
	                    });
	                });
	            </script>
					</td>
					<td id='pic-list'>
						
					</td>
					
				</tr>
			</table>

			<table class='table table-bordered'>
				<tr>
					<th colspan="3" class="btn btn-primary">商品图册</th>
				</tr>
				<tr class="info">
					<td>上传图片</td>
					<td>
						<input type="file" name='photo' id='photo' />
				<span>类型: *.jpg,*.png 大小: 2000KB 数量: 10</span>
	            <script type="text/javascript">
	                $(function() {
	                    $('#photo').uploadify({
	                        'formData'     : {//POST数据
	                            '<?php echo session_name();?>' : '<?php echo session_id();?>',
	                        },
	                        'fileTypeDesc' : '上传文件',//上传描述
	                        'fileTypeExts' : '*.jpg;*.png',
	                        'swf'      : '__STATIC__/uploadify/uploadify.swf',
	                        'uploader' : '{|U:"upload_photoList"}',
	                        'buttonText':'选择文件',
	                        'fileSizeLimit' : '2000KB',
	                        'uploadLimit' : 1000,//上传文件数
	                        'width':65,
	                        'height':25,
	                        'successTimeout':10,//等待服务器响应时间
	                        'removeTimeout' : 0.2,//成功显示时间
	                        'onUploadSuccess' : function(file, data, response) {
	                            data=$.parseJSON(data);
	                            var li = '<h4>商品详情页图册</h4>';
	                            $.each(data, function(k,v) {  
	                            	    li += "<li path='__ROOT__/"+v+"' ><img src='__ROOT__/"+v+"' class='hd-w80 hd-h70'/><a href='javascript:;' class='del-img'>删除</a>";
	                                	li += '<input type="hidden" name="thumb[]" id="thumb" value="'+v+'" /><>';                    
	                            });
	                            $("#photoList ul").prepend(li);
	                        }
	                    });
	                });
	            </script>
					</td>
					<td id='photoList'>
						<ul>
							
						</ul>
					</td>
					
				</tr>
			</table>
           <script type="text/javascript">
				//点击x删除图片
				$('.del-img').live('click',function(){
					var liObj = $(this).parents('li');
					//找到父级li里面的地址
					var path = liObj.attr('path');
					//发异步到服务器删除
					$.ajax({
						type:"post",
						url:"{|U:'delImg'}",
						data:{path:path},
						success:function(data){
							//移除图片
							liObj.remove();
						}
					});
				})
			</script>
			<table class='table'>
				<tr class="next_show">
					<th class="btn btn-primary">商品详细</th>
				</tr>
				<tr class="info">
					<td>
						<script id="editor" type="text/plain" style="width:800px;height:400px;" name="content"></script>
                        <script>var ue = UE.getEditor('editor');</script>
					</td>
				</tr>
			</table>

			<input type="hidden" name='tid' value='0'/>
			<input type="submit" value="确认添加" class="btn btn-primary btn-block btn-large" />
		</fieldset>
	</form>

	</div>
	</div>
	</div>
</body>
</html>